<!--
*  2021-03-15
*  成品跟踪  颜色汇总
-->
<template>
  <div id="app" class="view-color">
    <!-- 头部导航 -->
    <van-nav-bar
      ref="header"
      :title="designNo + '(' + title + ')'"
      left-arrow
      @click-left="onClickLeft"
      left-text="返回"
    >
    </van-nav-bar>

    <!-- 搜索 -->
    <van-search
      v-model="keyLike"
      placeholder="输入搜索颜色关键词"
      @search="onClickSearch"
    ></van-search>
    <!-- 滚动 -->
    <better-scroll
      class="public-scroll"
      :data="tableData"
      :totalPage="totalPage"
    >
      <van-cell-group v-show="tableData.length !== 0">
        <van-cell
          v-for="(data, index) in tableData"
          :key="index"
          :title="data.color"
        >
          <template slot="label">
            <div class="product-code__cell">
              <p>
                <span style="cursor: pointer;color: red" @click="onClickExcept(data)">预计匹数: {{ data.exceptNum }}</span>
                <span style="cursor: pointer;color: red" @click="onClickArea(data)">实际匹数: {{ data.totalNum }}</span>
              </p>
              <p>
                <span>大仓匹数: {{ data.otherAreaNum }}</span>
                <span>临仓匹数: {{ data.tempAreaNum }}</span>
              </p>
              <p>
                <span>实际米数: {{ data.length }}</span>
              </p>
            </div>
          </template>
        </van-cell>
      </van-cell-group>
      <van-empty
        class="custom-image"
        image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
        v-show="tableData.length === 0"
        description="暂无数据"
      />
    </better-scroll>
  </div>
</template>

<script>
import { openWin } from "@/utils/index";
import { loadProductColorStoreData } from "@/api/product";

export default {
  name: "productViewColor",
  data() {
    return {
      title: "颜色汇总",
      totalPage: 1,
      tableData: [],
      designNo: "",
      keyLike: "",
    };
  },
  mounted() {
    const that = this;
    if (process.env.NODE_ENV === "production") {
      this.$nextTick(() => {
        that.initFn(that);
      });
    } else {
      window.apiready = function () {
        that.initFn(that);
      };
    }
  },
  methods: {
    //初始化
    initFn(that) {
      that.designNo = window.api.pageParam.designNo;
      that.onGetTableData();
    },
    // 返回
    onClickLeft() {
      openWin("product-view", {
          scrollY: window.api.pageParam.scrollY,
          keyLike: window.api.pageParam.keyLike
        });
    },
    // 成品颜色汇总
    onGetTableData() {
      let params = {};
      // params.beginAt = this.beginAt
      // params.endAt = this.endAt
      params.designNo = this.designNo
      params.color = this.keyLike
      this.tableData = [];
      loadProductColorStoreData(params, (res) => {
        this.tableData = res;
      });
    },
    onClickSearch() {
      this.onGetTableData();
    },
    // 预计库存
    onClickExcept(data) {
      openWin('view-except', {
        designNo: this.designNo,
        color: data.color,
        isColor: true,
        title: this.designNo + '(' + data.color + ')' + "（预计匹数汇总）",
        scrollY: window.api.pageParam.scrollY,
          keyLike: window.api.pageParam.keyLike
      })
    },
    // 实际汇总
    onClickArea(data) {
      openWin('view-area', {
        designNo: this.designNo,
        color: data.color,
        vatNo: '',
        isColor: true,
        isVatNo: false,
        title: this.designNo + '(' + data.color + ')' + "(实际匹数汇总)",
        scrollY: window.api.pageParam.scrollY,
          keyLike: window.api.pageParam.keyLike
      })
    }
  },
};
</script>

<style lang="scss">
.view-color {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .van-search {
    width: 100%;
    position: relative;
    z-index: 999;
   
  }
   .van-cell__title {
      flex: 0 0 70%;
      .product-code__cell {
        width: 100%;
        display: flex;
        flex-direction: column;
        p {
          width: 100%;
          height: 30px;
          display: flex;
          justify-content: space-between;
          span {
            flex: 1;
            display: flex;
            align-items: center;
            &:last-child {
              justify-content: flex-end;
            }
          }
          &:last-child {
            span {
              justify-content: flex-start;
            }
          }
        }
      }
    }
  .public-scroll {
    flex: 1;
    overflow: hidden;
  }
}
</style>
